<template>
  <div class="page-content-layout__left-right" v-if="props.layoutType === 'left-right'">
    <div class="layout__wrap__left">
      <slot name="left"></slot>
    </div>
    <div class="layout__wrap__right" >
      <div class="layout__wrap__right__top">
        <slot name="top"></slot>
      </div>
      <div class="layout__wrap__right__bottom">
        <slot name="bottom"></slot>
      </div>
      <slot></slot>
    </div>
  </div>
  <div class="page-content-layout__top-bottom" v-else-if="props.layoutType === 'top-bottom'">
    <slot></slot>
    <div class="layout__wrap__top">
      <slot name="top"></slot>
    </div>
    <div class="layout__wrap__bottom">
      <slot name="bottom"></slot>
    </div>
  </div>
  <div class="page-content-layout__default" v-else>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: "LayoutPage",
  props: {
    layoutType: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped lang="less">
  .page-content-layout {
    &__default {
      min-height: 100%;
    }
    &__top-bottom {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      .layout__wrap__top {
        padding: 16px;
        background-color: #ffffff;
      }
      .layout__wrap__bottom {
        padding: 16px;
        display: flex;
        margin-top: 16px;
        flex: 1;
        overflow: hidden;
        background-color: #ffffff;
      }
    }

    &__left-right {
      display: flex;
      height: 100%;
      .layout__wrap__left {
        width: 300px;
        flex: 0 0 300px;
        margin-right: 16px;
        background-color: #ffffff;
      }
      .layout__wrap__right {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: auto;
        // 只有一个插槽时，使用默认样式
        &__style {
          display: block;
          overflow-y: auto;
          padding: 16px;
          background-color: #ffffff;
        }
        .layout__wrap__right__top {
          padding: 16px;
          background-color: #ffffff;
        }
        .layout__wrap__right__bottom {
          padding: 16px;
          display: flex;
          margin-top: 16px;
          flex: 1;
          overflow: hidden;
          background-color: #ffffff;
        }
      }
    }
  }
</style>
